// 导航封装
import React from 'react'
import './nav.css'
interface NavListProps {
    items: { text: string }[];
    onSelect: (index: number) => void;
    selectedIndex: number | null;
}

const Nav1: React.FC<NavListProps> = ({ items, onSelect, selectedIndex }) => {
    return (
        <div className='nav_box'>
            <div className='nav_nav'>
                <ul>
                    {items.map((item, index) => (
                        <li
                            key={index}
                            onMouseEnter={() => onSelect(index)}// 鼠标悬停时调用 onSelect 函数，传入当前下标
                            className={selectedIndex === index ? 'selected' : ''}//当selectedIndex与下标相同时，添加selected类名
                        >
                            <p>{item.text}</p>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
};

export default Nav1
